<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑房间</title>
<!-- layui的样式 -->
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>

<!-- 需要一个表单 -->
<form class="layui-form">
	
	<div class="layui-form-item">
		<label class="layui-form-label">照片</label>
		<div class="layui-input-block">
		<!-- 文件上传的控件 -->
		<div class="layui-upload">
 		 <button type="button" class="layui-btn" id="test1">上传图片</button>
  		 <div class="layui-upload-list">
   		 <img class="layui-upload-img" id="demo1" style="width:92px; height:92px;">
   		 <p id="demoText"></p>
  </div>
  <div style="width: 95px;">
    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
      <div class="layui-progress-bar" lay-percent=""></div>
    </div>
  </div>
</div>
	<a name="list-progress"></a>
		</div>
	</div>	
	<div class="layui-form-item">
		<label class="layui-form-label">房间号</label>
		<div class="layui-input-inline">
			<input type="text" name="number" placeholder="请输入房间号"
			 class="layui-input" required lay-verify="required">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">类型</label>
		<div class="layui-input-block">
			<input type="radio" name="type" value="0" title="大床房">
			<input type="radio" name="type" value="1" title="标准间">
			<input type="radio" name="type" value="2" title="三人间">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">描述</label>
		<div class="layui-input-inline">
			<input type="text" name="dscp" placeholder="请输入房间描述"
			 class="layui-input" >
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">单价</label>
		<div class="layui-input-inline">
			<input type="number" name="price" placeholder="请输入房间单价"
			 class="layui-input" required lay-verify="required" value="288">
		</div>
	</div>
	
	<!-- 状态 -->
	<div class="layui-form-item">
		<lable class="layui-form-label">状态</lable>
		<div class="layui-input-block">
			<input type="radio" name="status" value="0" title="正常">
			<input type="radio" name="status" value="1" title="删除">
		</div>
	</div>
	
	<div class="layui-form-item">
		<div class="layui-input-block">
			<input type="hidden" name="id">
			<input type="hidden" name="pic">
			<button type="submit" class="layui-btn" lay-submit lay-filter="edit-room">立即提交</button>
		</div>
	</div>
	
</form>

<!-- 引入layui的js文件 -->
<script type="text/javascript" src="/layui/layui.js"></script>

<!-- js -->
<script type="text/javascript">
layui.use(['form', 'upload', 'element', 'layer'],function(){
	var form = layui.form,
	upload = layui.upload,
	element = layui.element,
	layer = layui.layer,
	$ = layui.$;
	
	//读取要修改的信息，写到表单上
	var room = JSON.parse(sessionStorage.getItem('room'));
	
	// id
	$("input[name='id']").val(room.id);
	$("input[name='number']").val(room.number);
	$("input[name='dscp']").val(room.dscp);
	$("input[name='price']").val(room.price);
	$("input[name='type'][value='"+room.type+"']").attr('checked','checked');
	$("input[name='status'][value='"+room.status+"']").attr('checked','checked');
	
	//图片
	if(room.pic){
		$('#demo1').attr('src','/upload/' + room.pic);
		$("input[name='pic']").val(room.pic);
	}
	
	/* 初始化图片上传的控件 */
	//常规使用  -  普通图片上传
	var uploadInst = upload.render({
    elem: '#test1'
    ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
      
      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功的一些操作
      //……
      $('#demoText').html(''); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
	
	
	//重新渲染表单
	form.render();
	
	//表单提交
	form.on('submit(edit-room)',function(data){
		$.ajax({
			url: '/api/room/edit',
			data: data.field,
			type: 'post',
			dataType: 'json',
			success: function(result){
				if(result.code > 0){
					parent.layer.msg('修改成功');
					//关闭当前的弹出层
					parent.layer.closeAll('iframe');
				}else{
					layer.msg(result.msg);
				}
			},
			error: function(){
				layer.msg('请求失败');
			}
		});
		
		return false;
	});
	
});

</script>
</body>
</html>